<template>
  <view class="login">
    <view class="app-title">
      <text>welcome</text>
    </view>
    <view class="box-form">
      <u-form>
        <u-form-item>
          <u--input placeholder="请输入账号" border="surround" v-model="model.account" />
        </u-form-item>
        <u-form-item>
          <u--input placeholder="请输入密码" border="surround" password v-model="model.password" />
        </u-form-item>
        <u-form-item>
          <u-input placeholder="验证码" border="surround" v-model="model.code">
            <view slot="suffix">
              <u-image :src="captchaImg" height="24px" width="80px" mode="heightFix" @click="handleGenImage"></u-image>
            </view>
          </u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="box-submit">
      <u-button type="success" :loading="loading" @click="handleLogin" shape="circle">登录</u-button>
    </view>
    <view class="footer">
      <text>东川生活 @ 账号登录</text>
    </view>
  </view>
</template>

<script>
  import { encrypt } from '@/utils/login.js'
  export default {
    data() {
      return {
        model: {
          account: 'admin',
          password: '123456',
          code: '',
          codeId: ''
        },
        captchaImg: '',
        loading: false
      }
    },
    created() {
      this.handleGenImage()
      // console.log(this)
    },
    methods: {
      handleGenImage() {
        uni.$u.http.get('/api/SysAuth/Captcha').then(response => {
          let { id, img } = response.data.result
          this.model.codeId = id
          // console.log(img)
          this.captchaImg = `data:image/png;base64,${img}`
        })
      },
      handleLogin() {
        let data = { ...this.model }
        data.password = encrypt(data.password) // 加密结果
        this.loading = true
        uni.$u.http.post('/api/SysAuth/login', data).then(response => {
          let { code, message } = response.data
          if (code != 200) {
            this.$u.toast('登录失败：' + message)
            console.log(code, message)
            this.handleGenImage()
            return
          }
          let { accessToken, refreshToken } = response.data.result
          this.$u.vuex('vuex_token', accessToken)
          this.$u.route({
            url: '/pages/index/index',
            type: 'reLaunch'
          })
          this.$u.toast('登录成功！')
          // console.log(accessToken, refreshToken)
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>

<style lang="scss">
  .login {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    border: 0px solid #FF0000;
    box-sizing: border-box;
    padding-top: 30%;
    height: 100vh;
  }

  .app-title {

    border: 0px solid #096;
    font-size: 58upx;
    text-align: center;
  }

  .box-submit {
    border: 0px solid #096;
    font-size: 48upx;
    text-align: center;
    padding: 5px 30upx;
  }

  .box-form {
    border: 0px solid #096;
    height: 450upx;
    width: 700upx;
    padding: 25upx;
  }

  .footer {
    position: fixed;
    height: 100upx;
    text-align: center;
    color: #808080;
    font-size: 24upx;
    bottom: 5px;
    width: 100%;
    border: 0px solid #096;
  }
</style>